<template>
	<view>
		<view class="inv-top-menu-bar">
			<view class="top-menu">
				<view class="top-menu-list">
					<text class="t-btn " :class="item.id == currentIntentionItem.id ? 'active' : ''"
						v-for="(item, index) in intentionList" :key="index" @click="onIntentionSelected(item)">
						{{ item.category_text }}
					</text>
					<view class="clear"></view>
				</view>
			</view>
			<view class="handle_wrapper">
				<view class="add" @click="handleJump('/personal/RecommendAdd')"></view>
				<view class="search" @click="handleJump('/views/JobList')"></view>
			</view>
		</view>
		<view class="form_split_10"></view>
		<u-empty image="search" description="没有找到对应的数据" style="background-color:#fff" v-if="show_empty === true" />
		<view>
			<view class="box_1">
				<view v-for="(item, index) in joblist" :key="index"
					@click="handleClick('/commonViews/JobShow?id=',item.id)">
					<view class="box_item">
						<view class="tx1">
							<view class="name">{{ item.jobname }}</view>
							<view class="top_ico" v-if="item.stick === 1"></view>
							<view class="urgent_ico" v-if="item.emergency === 1"></view>
							<view class="clear"></view>
							<view class="right_txt">{{ item.wage_text }}</view>
						</view>
						<view class="tx2">
							{{ item.education_text }} · {{ item.experience_text }} ·
							{{ item.district_text }}
							<view class="right_txt">{{ item.refreshtime }}</view>
						</view>
						<view class="tx3" v-if="
			        item.tag_text_arr != undefined && item.tag_text_arr.length > 0
			      ">
							<view class="tag_item" v-for="(tag, k) in item.tag_text_arr" :key="k">{{ tag }}</view>
							<view class="clear"></view>
						</view>
						<view class="tx4">
							<view class="name">{{ item.companyname }}</view>
							<view class="auth_ico" v-if="item.company_audit == 1"></view>
							<view class="clear"></view>
						</view>
					</view>
					<view class="form_split_10"></view>
				</view>
			</view>
			<!-- <u-list v-if="joblist.length > 0" v-model="loading" :finished="finished" :finished-text="finished_text"
				@load="onLoad" :immediate-check="false"></u-list> -->
			<u-loadmore class="u-loadmore" v-if="joblist.length >= pagesize" :status="finished_status" />
		</view>
	</view>
</template>

<script>
	import http from '@/utils/http'
	import api from '@/api'
	export default {
		name: 'Recommend',
		data() {
			return {
				show_empty: false,
				intentionList: [],
				joblist: [],
				currentIntentionItem: {},
				page: 1,
				pagesize: 10
			}
		},
		beforeRouteLeave(to, from, next) {
			if (to.name == 'jobShow') {
				if (!from.meta.keepAlive) {
					from.meta.keepAlive = true
				}
				next()
			} else {
				from.meta.keepAlive = false
				next()
			}
		},
		onShow() {
			this.fetchDataIntention()
		},
		mounted() {
			this.fetchDataIntention()
		},
		onReachBottom() {
			this.page++
			this.fetchDataRecommend(false)
		},
		methods: {
			handleClick(path, id) {
				uni.navigateTo({
					url: path + id
				})
			},
			handleJump(path) {
				uni.navigateTo({
					url: path
				})
			},
			fetchDataIntention() {
				http
					.get(api.get_intentions, {})
					.then(res => {
						this.intentionList = [...res.data.data.items]
						if (this.intentionList.length > 0) {
							for (const key in this.intentionList) {
								this.intentionList[key].name = this.intentionList[key].category_text
							}
							this.currentIntentionItem = {
								...this.intentionList[0]
							}
							this.fetchDataRecommend(true)
						}
					})
					.catch(() => {})
			},
			fetchDataRecommend(init) {
				if (this.currentIntentionItem === null) {
					this.show_empty = true
					this.finished_status = ''
					return false
				}
				this.show_empty = false
				if (init === true) {
					this.page = 1
					this.finished = false
					this.finished_status = ''
				}
				let params = {
					id: this.currentIntentionItem.id,
					page: this.page,
					pagesize: this.pagesize
				}
				http
					.get(api.recommend_joblist, params)
					.then(res => {
						if (init === true) {
							this.joblist = [...res.data.data.items]
						} else {
							this.joblist = this.joblist.concat(res.data.data.items)
						}
						// 加载状态结束
						this.loading = false

						// 数据全部加载完成
						if (res.data.data.items.length < this.pagesize) {
							this.finished_status = ''
							if (init === false) {
								this.finished_status = ''
							} else if (res.data.data.items.length == 0) {
								this.show_empty = true
							}
						}
					})
					.catch(() => {})
			},
			onIntentionSelected(item) {
				this.currentIntentionItem = item
				this.fetchDataRecommend(true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box_1 {
		width: 100%;

		.box_item {
			width: 100%;
			background-color: #ffffff;
			padding: 34rpx 32rpx 20rpx;

			.tx4 {
				/* #ifdef MP-ALIPAY */
				display: flex;
				align-items: center;

				/* #endif */
				.name {
					font-size: 26rpx;
					color: #999999;
					float: left;
					max-width: 620rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.auth_ico {
					float: left;
					margin-left: 14rpx;
					width: 50rpx;
					height: 36rpx;
					background-image: url($ImgUrl + "tip_ico_auth.png");
					background-repeat: no-repeat;
					background-position: 0 6rpx;
					background-size: 50rpx 26rpx;
				}
			}

			.tx3 {
				margin-bottom: 10rpx;

				.tag_item {
					float: left;
					font-size: 22rpx;
					color: #1787fb;
					background-color: #edf6ff;
					padding: 6rpx 14rpx;
					border-radius: 6rpx;
					margin-bottom: 10rpx;

					&:not(:first-child) {
						margin-left: 10rpx;
					}
				}
			}

			.tx2 {
				font-size: 28rpx;
				color: #666666;
				padding: 0 160rpx 0 0;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: relative;
				margin-bottom: 20rpx;

				.right_txt {
					position: absolute;
					right: 0;
					top: 4rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}

			.tx1 {
				margin-bottom: 18rpx;
				position: relative;

				.name {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					float: left;
					max-width: 480rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.top_ico {
					float: left;
					margin-left: 14rpx;
					width: 76rpx;
					height: 44rpx;
					background-image: url($ImgUrl + "tip_ico_top.png");
					background-repeat: no-repeat;
					background-position: 0 8rpx;
					background-size: 76rpx 30rpx;
				}

				.urgent_ico {
					float: left;
					margin-left: 14rpx;
					width: 76rpx;
					height: 44rpx;
					background-image: url($ImgUrl + "tip_ico_urgent.png");
					background-repeat: no-repeat;
					background-position: 0 8rpx;
					background-size: 76rpx 30rpx;
				}

				.right_txt {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translate(0, -50%);
					font-size: 30rpx;
					color: #ff5d24;
					font-weight: bold;
				}
			}
		}
	}

	.inv-top-menu-bar {
		background: #ffffff;
		position: relative;

		.handle_wrapper {
			.search {
				width: 70rpx;
				height: 100%;
				position: relative;
				display: inline-block;
				background-image: $search_ico_blue;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 28rpx;

				&::after {
					content: " ";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translate(0, -50%);
					width: 2rpx;
					height: 30rpx;
					background-color: #f3f3f3;
				}
			}

			.add {
				width: 70rpx;
				height: 100%;
				position: relative;
				display: inline-block;
				background-image: $add_ico_blue;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 32rpx;
			}

			position: absolute;
			right: 0;
			top: 0;
			height: 100%;
			background-color: #ffffff;
			z-index: 3;
			box-shadow: -2rpx 0 40rpx rgba(255, 255, 255, 0.7);
		}

		.top-menu {
			width: 600rpx;
			overflow: hidden;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.top-menu-list {
			white-space: nowrap;

			.t-btn {
				position: relative;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				color: #666666;
				font-size: 30rpx;
				text-decoration: none;
				padding: 24rpx 33rpx;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);

				&::after {
					position: absolute;
					left: 50%;
					bottom: 0;
					width: 32rpx;
					height: 6rpx;
					background-color: #1787fb;
					border-radius: 100%;
					transform: translate(-50%, 0);
				}

				&.active {
					color: #1787fb;
				}

				&:last-child {
					margin-right: 120rpx;
				}
			}
		}
	}
</style>